<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span='1.5'>
                <el-button type="primary" plain icon='el-icon-plus' size='mini' @click='handleAdd'>新增</el-button>
            </el-col>
        </el-row>

        <Table :list='list' :loading='loading' :tableColumns='tableColumns' :tableOption='tableOption' @clickButton='clickButton'></Table>
        
        <pagination  v-show="total>0"  :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"  @pagination="getList"  />
        
        <el-dialog :title='title' :visible.sync="open" width="500px" append-to-body>
            <el-form ref='form' :model="form" :rules="rules" label-width="100px">
                <el-form-item label="商品名称" prop='name'>
                    <el-input v-model="form.name" placeholder="请输入商品名称" />
                </el-form-item>
                <el-form-item label="类型" prop='type'>
                    <el-input v-model="form.type"  />
                </el-form-item>
                <el-form-item label="图片" prop='picUrl'>
                    <el-input v-model="form.picUrl"  />
                </el-form-item>
                <el-form-item label="多图" prop='picUrlJson'>
                    <el-input v-model="form.picUrlJson"  />
                </el-form-item>
                <el-form-item label="单价" prop='unitPrice'>
                    <el-input v-model="form.unitPrice"  />
                </el-form-item>
                <el-form-item label="原价" prop='originalPrice'>
                    <el-input v-model="form.originalPrice"  />
                </el-form-item>
                <el-form-item label="正文" prop='body'>
                    <el-input v-model="form.body"  />
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {itemList,itemadd,itemUpdate} from '@/api/ka/ka'
import Table from '@/views/components/myTable'
export default {
    components:{
        Table
    },
    data() {
        return {
            loading:true,
            tableColumns:[
                {label:'商品ID',param:'id'},
                {label:'商品名称',param:'name'},
                {label:'图片',param:'picUrl',type:'itemImages'},
                // {label:'多图',param:'picUrlJson'},
                {label:'单价',param:'unitPrice'},
                {label:'原价',param:'originalPrice'},
                {label:'状态',param:'state'},
                {label:'类型',param:'type'},
                // {label:'正文',param:'body'},
                {label:'创建日期',param:'createdAt',
                    render: row => {
                        return row.createdAt.replace('T',' ').substring(0,16)
                    }
                },

            ],
            tableOption:{
                label:'操作',
                options:[
                    {
                        label:'修改',
                        text:'text',
                        icon:'el-icon-edit',
                        methods:'handleUpdate'
                    }
                ]
            },
            list:[],
            title:'',
            open:false,
            total:0,
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            form:{},
            rules:{
                name:[{required: true, message: "商品不能为空", trigger: "blur"}],
                picUrl:[{required: true, message: "图片不能为空", trigger: "blur"}],
                unitPrice:[{required: true, message: "单价不能为空", trigger: "blur"}],
                originalPrice:[{required: true, message: "原价不能为空", trigger: "blur"}],
            }

        }
    },
    created(){
        this.getList()
    },
    methods:{
        clickButton(val){
            this[val.methods](val.row)
        },
        //列表
        getList(){
            this.loading = true;
            itemList(this.addDateRange(this.queryParams)).then(res=>{
                this.list = res.data.rows;
                this.total = res.data.total;
                this.loading = false;
            })
        },
        //新增
        handleAdd(){
            this.reset()
            this.open = true;
            this.title ='新增商品配置'
        },
        //修改
        handleUpdate(row){
            this.reset()
            this.open = true;
            this.title = '修改商品配置'
            this.form.id = row.id
            this.form.name = row.name
            this.form.picUrl = row.picUrl
            this.form.unitPrice = row.unitPrice
            this.form.originalPrice = row.originalPrice
            this.form.type = row.type
            this.form.picUrlJson = row.picUrlJson
            this.form.body = row.body

        },
        //提交
        submitForm(){
            this.$refs["form"].validate(valid=>{
                if(valid){
                    const id = this.form.id
                    if(id==undefined){
                        itemadd(this.form).then(res=>{
                            this.msgSuccess("新增成功");
                            this.open =  false;
                            this.getList()
                        })
                    }else{
                        itemUpdate(this.form).then(res=>{
                            this.msgSuccess("修改成功");
                            this.open =  false;
                            this.getList()
                        })
                    }
                    
                }
            })
            
        },
        //取消
        cancel(){
            this.open= false;
            this.reset();
        },
        //表单重置
        reset(){
            this.form = {
                name:undefined,
                picUrl:undefined,
                unitPrice:undefined,
                originalPrice:undefined,
                type:undefined,
                picUrlJson:undefined,
                body:undefined
            }
        },

    }
}
</script>
<style scoped>

</style>